<template>
 

  <el-container>
    <el-aside width="350px">
      <el-card class="box-card">
        <div  class="text item" style=" display: flex; justify-content: end;">
          <el-button size="mini" type="text" @click="initGeojson">运行</el-button>
        </div>
        <div  class="text item">
          <el-input
            placeholder="geojson请求路径"
            v-model="pbfPath"
            clearable>
          </el-input>
        </div>
        <!-- <div class="text item" style="margin-top: 10px;">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="geojson对象或者字符串"
            v-model="oldGeosjon">
          </el-input>
        </div> -->
      </el-card>
      <!-- <json-viewer style="margin-top: 10px;"
      :value="jsonData"
      :expand-depth=5
      copyable
      boxed
      @copied="onCopy"
      sort/> -->
    </el-aside>
    <el-main>
      <div class="mapbox-maps">
        <div id="map">      
        </div> 
      </div>   
    </el-main>
  </el-container>  
</template>
<script>
export default{
    name:'MapboxPbf',
    data(){
      return{
        oldGeosjon:'',
        pbfData: {
          type:'vector',
          tiles:['http://124.193.68.152:59021/layer/getByteData1/230/{z}/{x}/{y}.pbf'],
          minzoom:0,
          maxzoom:18 
        },
        pbfPath:'http://172.17.13.88:11280/dynamic/large_grid/{z}/{x}/{y}.pbf',
        drawer: false,
        map:{},
        geojson: {        
          type:'geojson',
          data:{
          "type": "FeatureCollection",
          "features":[]
          }
        },
        jsonData: {},
      
      }
    },
    mounted() {
      this.loadMap()
    },
    beforeDestroy(){
      this.map.remove()
    },
    methods:{
        
      loadMap() {
          // 英文标注转换为中文   
          // mapboxgl.setRTLTextPlugin(
          //   "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
          // );
          this.map =  new mapboxgl.Map({
              accessToken: 'pk.eyJ1Ijoienh0d24iLCJhIjoiY2wzanV3bHduMTZwejNrcXcyd3B1bzBieiJ9.aW_TDqLomftwPvBu7OWqwQ',
              container: 'map',
              style: 'mapbox://styles/mapbox/outdoors-v10', // stylesheet location
              center: [116.787815694,32.68637244], // starting position [lng, lat]
              zoom: 12, // starting zoom
              hash: false,
              //pitch: 45,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
              bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
              antialias: true, //抗锯齿，通过false关闭提升性能
          })
          // 设置语言
          // var language = new MapboxLanguage({ defaultLanguage: "zh" });
          // this.map.addControl(language);

          //地图导航
          var nav = new mapboxgl.NavigationControl();
          this.map.addControl(nav, 'top-right');

          // 比例尺
          var scale = new mapboxgl.ScaleControl({
              maxWidth: 100,
              unit: "metric"
          });
          this.map.addControl(scale,"bottom-left");

          // 全图
          this.map.addControl(new mapboxgl.FullscreenControl());
          // 定位
          this.map.addControl(
              new mapboxgl.GeolocateControl({
              positionOptions: {
                  enableHighAccuracy: true
              },
              trackUserLocation: true
              })
          );
          let that = this;
          this.map.on('load',function () {
            that.map.addSource('polygon', that.pbfData);

            that.map.addLayer({
                "id": "polygon",
                "type": "fill",
                "source": "polygon",
                "source-layer": "polygon",
                "layout": {
                "visibility": "visible"
                },
                "paint": {
                    'fill-color': '#e6141c',
                    'fill-opacity': 0.8
                },
                // "maxzoom": 18,
                // "minzoom": 0,
            })
        
            // that.map.addLayer({
            //     "id": "national-park",
            //     "type": "line",
            //     "source": "large_grid",
            //     "source-layer": " polygon",
            //     "layout": {
            //     "visibility": "visible"
            //     },
            //     "paint": {
            //     "line-opacity": 1,
            //     "line-color": "#000000",
            //     "line-width": 1,
            //     },
            //     "maxzoom": 8,
            //     "minzoom": 0,
            // })
          })
          
      },
      /**
       * 拷贝geojson
       */
      onCopy(e){
          console.log(e)
          alert(e)
      },
      /**
       * 渲染geojson数据
       * 
       */
      initGeojson(){
        debugger
        let that = this
        let ISNULL =false;
        if(that.pbfPath!=""){
          ISNULL = true
        }
        console.log(that)
        if(ISNULL){
            that.map.getSource('large_grid').setTiles( {
                type:'vector',
                tiles:[],
                minzoom:0,
                maxzoom:8 
            })
            // that.map.getSource('large_grid').setTiles(that.pbfData)
        //    if (that.map.getLayer('national-park')) {
        //        that.map.removeLayer('national-park')
        //     }
        //     if (that.map.getSource('national-park')) {
        //         that.map.removeSource('national-park');
        //     }

        //     that.map.addSource('national-park', {
        //         type:'vector',
        //         tiles:[that.pbfPath],
        //         minzoom:0,
        //         maxzoom:8  
        //     });

        //     that.map.addLayer({
        //         'id': 'national-park',
        //         "type": "line",
        //         'source': 'national-park',
        //         "source-layer": "national-park",
        //         "layout": {
        //           "visibility": "visible"
        //         },
        //         "paint": {
        //             "line-opacity": 1,
        //             "line-color": "#000000",
        //             "line-width": 1,
        //         },
        //         "maxzoom": 8,
        //         "minzoom": 0,
        //     });
          
          
        }       
      },
    }
}

</script>
<style scoped lang="scss">
 @import "../../../public/mapbox/mapbox-gl.css";
 .mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom:0;
        right: 0;        
    }
    
}
.mapboxgl-canvas {
    outline: none;
}
  /* 隐藏mapbox商标 */
.mapboxgl-ctrl-logo {
    display: none;
} 
.el-aside {
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 200px;
    // border: 1px solid red;
    line-height: 19px;
    padding: 10px;
    text-align: left;
}
.jv-container .jv-code.boxed {
    max-height: 100%;
}
</style>